<template>
  <div class="van_card">
    <div class="van_card_title">快捷搜索</div>
    <div class="query_area">
      <input
        type="text"
        v-if="quickSearch.hasOwnProperty('meetingName')"
        v-model="quickSearch.meetingName"
        placeholder="请输入会议名称"
      />
      <input
        type="text"
        v-if="quickSearch.hasOwnProperty('idNumber')"
        v-model="quickSearch.idNumber"
        placeholder="请输入会议编号"
      />
      <input
        type="text"
        v-if="quickSearch.hasOwnProperty('name')"
        v-model="quickSearch.name"
        placeholder="请输入乘机人"
      />
      <div
        class="query_item"
        v-if="quickSearch.hasOwnProperty('startDate')"
        @click="handleCalender(0)"
      >
        <div class="clear_item" v-if="quickSearch.startDate">
          <span>{{quickSearch.startDate}}</span>
          <span class="clear_btn" @click.stop="clearDate('startDate')">
            <van-icon name="cross" />
          </span>
        </div>
        <div v-else>{{timerPlaceholder.start}}</div>
      </div>
      <div
        class="query_item"
        v-if="quickSearch.hasOwnProperty('endDate')"
        @click="handleCalender(1)"
      >
        <div class="clear_item" v-if="quickSearch.endDate">
          <span>{{quickSearch.endDate}}</span>
          <span class="clear_btn" @click.stop="clearDate('endDate')">
            <van-icon name="cross" />
          </span>
        </div>
        <div v-else>{{timerPlaceholder.end}}</div>
      </div>
      <div
        class="query_item"
        v-if="quickSearch.hasOwnProperty('deadline')"
        @click="handleCalender(2)"
      >
        <div class="clear_item" v-if="quickSearch.deadline">
          <span>{{quickSearch.deadline}}</span>
          <span class="clear_btn" @click.stop="clearDate('deadline')">
            <van-icon name="cross" />
          </span>
        </div>
        <div v-else>最晚审批时限</div>
      </div>
      <div
        class="query_item"
        v-if="quickSearch.hasOwnProperty('tripDate')"
        @click="handleCalender(3)"
      >
        <div class="clear_item" v-if="quickSearch.tripDate">
          <span>{{quickSearch.tripDate}}</span>
          <span class="clear_btn" @click.stop="clearDate('tripDate')">
            <van-icon name="cross" />
          </span>
        </div>
        <div v-else>出行日期</div>
      </div>
      <div class="query_item" v-if="quickSearch.hasOwnProperty('status')" @click="handleSwitch">
        <div class="clear_item" v-if="quickSearch.status">
          <span>{{quickSearch.status}}</span>
          <span class="clear_btn" @click.stop="clearDate('status')">
            <van-icon name="cross" />
          </span>
        </div>
        <div v-else>机票/火车票状态</div>
      </div>
      <div class="query_item" v-if="quickSearch.hasOwnProperty('listResource')" @click="handshowListRe">
        <div class="clear_item" v-if="quickSearch.listResource">
          <span>{{quickSearch.listResource}}</span>
          <span class="clear_btn" @click.stop="clearDate('listResource')">
            <van-icon name="cross" />
          </span>
        </div>
        <div v-else>请选择名单来源</div>
      </div>
      <van-calendar
        color="#2D82F0"
        :min-date="minDate"
        :max-date="maxDate"
        v-model="showCalender"
        :show-confirm="false"
        @confirm="onConfirm"
      />
      <van-action-sheet
        close-on-click-action
        v-model="showSwitch"
        :actions="actions"
        @select="onSelect"
      />
      <van-action-sheet
        close-on-click-action
        v-model="showListRe"
        :actions="listResource"
        @select="onSelectRe"
      />

      <div class="serach_area">
        <van-button icon="search" round type="info" @click="handleSearch">搜索</van-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    quickSearch: {
      type: Object,
      default: [],
    },
    needNumber: {
      type: Boolean,
      default: false,
    },
    timerPlaceholder: {
      type: Object,
      default: () => {
        return {
          start: "会议开始日期",
          end: "会议结束日期",
        };
      },
    },
  },
  data() {
    return {
      showCalender: false,
      showSwitch: false,
      showListRe: false,
      calenderStatus: "",
      minDate: new Date(2020, 0, 10),
      maxDate: new Date(2030, 0, 10),
      actions: [
        { name: "全部" },
        { name: "已提交审批" },
        { name: "已出票" },
        { name: "申请改期中" },
        { name: "已改期" },
        { name: "申请退票" },
        { name: "已退票" },
        { name: "审批不通过" },
      ],
      listResource:[
        { name: "全部" },
        { name: "预录入" },
        { name: "新添加" },

      ]
    };
  },
  methods: {
    // 控制日期选择器是开始日期或者结束日期
    handleCalender(status) {
      this.calenderStatus = status;
      if (status === 0) {
        this.minDate = new Date(2020, 0, 10);
        if (this.quickSearch.endDate) {
          this.maxDate = new Date(this.quickSearch.endDate);
        }
      } else if (status === 1) {
        this.maxDate = new Date(2030, 0, 10);
        this.minDate = this.quickSearch.startDate
          ? new Date(this.quickSearch.startDate)
          : new Date(2020, 0, 10);
      }
      this.showCalender = true;
    },
    // 进行日期筛选
    handleSwitch() {
      this.showSwitch = true;
    },
    handshowListRe() {
      this.showListRe = true;
    },
    // 清除筛选日期
    clearDate(item) {
      this.quickSearch[item] = "";
    },
    onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.quickSearch.status = item.name;
      this.show = false;
    },
    onSelectRe(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.quickSearch.listResource = item.name;
      this.show = false;
    },
    onConfirm(date) {
      this.showCalender = false;
      if (this.calenderStatus === 0) {
        this.quickSearch.startDate = `${this.formatDate(date)}`;
      } else if (this.calenderStatus === 1) {
        this.quickSearch.endDate = `${this.formatDate(date)}`;
      } else if (this.calenderStatus === 2) {
        this.quickSearch.deadline = `${this.formatDate(date)}`;
      } else if (this.calenderStatus === 3) {
        this.quickSearch.tripDate = `${this.formatDate(date)}`;
      }
    },
    formatDate(date) {
      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
    },
    // 把当前搜索信息传回父组件
    handleSearch() {
      this.$emit("getSearchInfo", this.quickSearch);
    },
  },
};
</script>

<style scoped lang="less">
.clear_item {
  display: flex;
  justify-content: space-between;
  .clear_btn {
    display: block;
    width: 40px;
    text-align: right;
  }
}
</style>